<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form label-position="right" label-width="80px" :model="form" :rules="rules" ref="form">
          <el-form-item label="上级目录" >
            <!--            <el-cascader :options="dataTree" :show-all-levels="false"></el-cascader>-->
            <!--            <el-tree
                               :data="dataTree"
                               :check-strictly="true"
                               show-checkbox
                               node-key="menuId"
                               :props="{children: 'children',label:'menuName'}">
                           </el-tree>-->
            <el-cascader style="width: 100%"
                         clearable
                         :checkStrictly="true"
                         v-model="form.parentId"
                         :options="dataTree"
                         :props="{ children: 'children',label:'menuName',value:'menuId',checkStrictly : true}"
            ></el-cascader>

          </el-form-item>
          <el-form-item label="菜单名称" prop="menuName">
            <el-input v-model="form.menuName"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-select v-model="form.icon" placeholder="请选择">
              <el-option
                  v-for="item in options" :key="item.value"
                  :label="item.label"
                  :value="item.icon"
              >
                <span><i :class="item.icon"></i> {{ item.label }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="orderNum">
            <el-input v-model="form.orderNum"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="perms">
            <el-input v-model="form.perms"></el-input>
          </el-form-item>
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="form.component"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-tooltip :content="'Switch value: ' + status" placement="top">
              <el-switch
                  v-model="form.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="0"
                  inactive-value="1">
              </el-switch>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-button @click="$router.push('/index/menu')">取消</el-button>
        <el-button type="warning" @click="submitForm">保存</el-button>
        <el-button type="info">保存并添加</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
import buildTree from "@/utils/buildTree";

export default {
  name: "AddMenu",
  async created() {
    let data = await request("menu")
    this.dataTree = [{menuId:0,menuName:"根节点",children:buildTree(data, 0)}]

    let menuId = this.$route.query.menuId
    if (menuId) {
      console.info(menuId)
      let o = await request(`menu/${menuId}`)
      this.form = o
      //this.form.parentId=[this.form.parentId]
      console.info(o)
    }
  },
  data() {
    return {
      //上级目录选择
      dataTree: [],

      //表单数据
      form: {},
      status: '0',

      rules: {
        orderNum: [
          {required: true, message: '请输入排序', trigger: 'blur'}],
      },
    }
  },
  computed: {
    options() {
      return [
        {value: '选项1', label: 'system', icon: 'el-icon-setting'},
        {value: '选项2', label: 'monitor', icon: 'el-icon-user-solid'},
        {value: '选项3', label: 'tool', icon: 'el-icon-s-tools'},
        {value: '选项4', label: 'guide', icon: 'el-icon-s-opportunity'},
        {value: '选项5', label: 'user', icon: 'el-icon-user'},
        {value: '选项6', label: 'peoples', icon: 'el-icon-s-check'},
        {value: '选项7', label: 'tree-table', icon: 'el-icon-grape'},
        {value: '选项8', label: 'tree', icon: 'el-icon-cherry'},
        {value: '选项9', label: 'post', icon: 'el-icon-phone'},
        {value: '选项10', label: 'dict', icon: 'el-icon-more'},
        {value: '选项11', label: 'message', icon: 'el-icon-chat-dot-round'},
        {value: '选项12', label: 'log', icon: 'el-icon-bangzhu'},
        {value: '选项13', label: 'online', icon: 'el-icon-edit-outline'},
        {value: '选项14', label: 'job', icon: 'el-icon-map-location'},
        {value: '选项15', label: 'druid', icon: 'el-icon-date'},
        {value: '选项16', label: 'server', icon: 'el-icon-s-order'},
        {value: '选项17', label: 'redis', icon: 'el-icon-printer'},
        {value: '选项18', label: 'redis-list', icon: 'el-icon-umbrella'},
        {value: '选项19', label: 'build', icon: 'el-icon-headset'},
        {value: '选项20', label: 'code', icon: 'el-icon-s-flag'},
        {value: '选项21', label: 'swagger', icon: 'el-icon-mobile'},
        {value: '选项22', label: 'form', icon: 'el-icon-tickets'},
        {value: '选项23', label: 'logininfor', icon: 'el-icon-attract'}
      ];
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let arr = this.form.parentId
          this.form.parentId = arr[arr.length - 1]
          request("menu", this.form.menuId ? "put" : "post", this.form).then(() => {
            this.$message.success("操作成功")
            this.$router.push("/index/menu")
          }).catch(error => {
            console.info(error)

          })
        } else {

          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>